<template>
	<div class="news-profile">
		<div class="title">{{title}}</div>
		<div class="main">
			<a href="javascript:;" v-html="content" @click="toDetail()"></a>
		</div>
		<div class="news-footer">
			<img src="../assets/images/guonei.png" alt="">
			<span>{{category}}</span>
			<img src="../assets/images/shijian.png" alt="">
			<span>{{pubTime}}</span>
			<img src="../assets/images/liulan.png" alt="">
			<span>{{readTimes}}</span>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'NewsProfile',
		props: ['id', 'title', 'content', 'category', 'pubTime', 'readTimes'],
		methods:{
			toDetail(){
				this.$router.push('/newsDetail/4')
			}
		}
	}
</script>

<style>
	.news-profile{
		border-top: 1px solid lightsalmon;
		padding-bottom: 1rem;
	}
	.title {
		font-size: 1.3rem;
	}
	.main{
		margin-top: 1rem;
		margin-bottom: 1rem;
		overflow: hidden;
		max-height: 8rem;
	} 
	a{
		text-decoration-line: none;
		color: black;
	}
	.news-footer img,span{
			vertical-align: middle;
	}
	.news-footer img{
		margin-right: .3rem;
	}
	.news-footer span{
		margin-right: 2rem;
	}
</style>